<template>
    <!-- :key="randomkey"  language="java" -->
    <MonacoEditor height="950" :code="value" :language="lang" src-path="" :editor-options="options" @mounted="onMounted" @codeChange="onCodeChange" />
</template>

<script>
import MonacoEditor from 'vue-monaco-editor'

export default {
  components: {
    MonacoEditor
  },
  props: {
    value: {
      type: String,
      required: true
    },
    height: {
      type: String,
      required: true
    },
    lang: {
      default: 'java'
    }
  },
  data() {
    return {
      code: '// Type away! \n',
      options: {
        selectOnLineNumbers: true,
        lineWrapping: true, // 代码折叠
        foldGutter: true,
        gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
        matchBrackets: true, // 括号匹配
        roundedSelection: false,
        // readOnly: this.readOnly, // 只读
        cursorStyle: 'line', // 光标样式
        automaticLayout: true, // 自动布局
        glyphMargin: true, // 字形边缘
        useTabStops: false,
        fontSize: 28, // 字体大小
        autoIndent: true // 自动布局
      },
      editor: null,
      randomkey: 1231231
    }
  },
  watch: {
    value(value) {
      const editorValue = this.editor.getValue()
      if (value !== editorValue) {
        this.code = this.value
        this.randomkey = this.createRamdomKey()
        this.editor.layout()
      }
    },
    height(value) {
      //   this.editor.setSize('auto', this.height)
    }
  },

  methods: {
    onMounted(editor) {
      this.editor = editor
      console.log(this.editor)
    },
    onCodeChange(editor) {
      //   console.log(this.editor.getValue())
      this.$emit('input', this.editor.getValue())
    },
    getEditorValue() {
      return this.editor.getValue()
    }
  }
}
</script>

<style scoped>
/* .monaco-editor {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    max-height: 100% !important;
    margin: 0;
    padding: 0;
    overflow: hidden;
} */
</style>
